<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <!-- 编辑器 -->
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ref, shallowRef, onBeforeUnmount, watch } from 'vue'
import { useTokenStore } from '@/stores/token.js'

// Props
const props = defineProps({
  modelValue: {
    type: String,
    default: '<p>请输入新闻内容...</p>'
  }
})

// Emits
const emit = defineEmits(['update:modelValue'])

// 响应式数据
const editorRef = shallowRef()
const valueHtml = ref(props.modelValue)
const mode = 'default' // 或 'simple'
const tokenStore = useTokenStore()

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  valueHtml.value = newValue
})

// 监听内容变化，向父组件发送更新
watch(valueHtml, (newValue) => {
  emit('update:modelValue', newValue)
})

// 获取管理员token
const getAdminToken = () => {
  return tokenStore.token || localStorage.getItem('token') || ''
}

const toolbarConfig = {}

// 动态生成编辑器配置
const getEditorConfig = () => ({
  placeholder: '请输入新闻内容...',
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      // 上传图片配置
      server: '/api/adminUser/news/upload',
      
      // form-data fieldName，默认值 'wangeditor-uploaded-image'
      fieldName: 'file',
      
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 10 * 1024 * 1024, // 10M
      
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 1,
      
      // 选择文件时的类型限制，默认为 ['image/*']
      allowedFileTypes: ['image/*'],
      
      // 自定义上传参数，例如传递验证的 token 等
      meta: {
        // token: 'xxx',
        // otherKey: 'yyy'
      },
      
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
      
      // 自定义增加 http  header
      headers: {
        'Authorization': getAdminToken()
      },
      
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: false,
      
      // 超时时间，默认为 10 秒
      timeout: 30 * 1000, // 30 秒
      
      // 上传之前触发
      onBeforeUpload(file) {
        console.log('上传图片之前', file)
        return file // 返回 file 继续上传，返回 false 终止上传
      },
      
      // 上传进度的回调函数
      onProgress(progress) {
        console.log('上传进度', progress)
      },
      
      // 单个文件上传成功之后
      onSuccess(file, res) {
        console.log('上传成功', file, res)
      },
      
      // 单个文件上传失败
      onFailed(file, res) {
        console.log('上传失败', file, res)
        alert('图片上传失败：' + (res.message || '未知错误'))
      },
      
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log('上传出错', file, err, res)
        alert('图片上传出错：' + (err.message || '网络错误'))
      },
      
      // 自定义插入图片
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        console.log('自定义插入图片', res)
        
        // 从 res 中找到 url alt href ，然后插入图片
        if (res.code === 200 && res.data && res.data.url) {
          insertFn(res.data.url, res.data.originalName || '图片', res.data.url)
        } else {
          alert('图片上传失败：' + (res.message || '未知错误'))
        }
      }
    }
  }
})

const editorConfig = getEditorConfig()

// 编辑器创建回调
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 获取编辑器内容
const getContent = () => {
  return valueHtml.value
}

// 设置编辑器内容
const setContent = (html) => {
  valueHtml.value = html
}

// 暴露方法给父组件
defineExpose({
  getContent,
  setContent
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>
